<template>
  <div class="">
    <el-form ref="ruleFormRef" action="#" v-loading="loading" :model="ruleForm" status-icon :rules="rules"
      label-width="auto" class="demo-ruleForm">
      <el-image style="width: 50px; height: 50px;border-radius: 5px;" :src="IMGA1" :zoom-rate="1.2" :max-scale="7"
        :min-scale="0.2" :preview-src-list="[IMGA1]" show-progress :initial-index="4" fit="cover" />
      <img v-lazy="IMGA1" />
      <table class="table-form">
        <tr>
          <td colspan="6">
            <h3>小型除藻车运行日报表</h3>
          </td>
        </tr>
        <tr>
          <td class="vform-title">
            项目名称
          </td>
          <td colspan="5">
            <el-form-item prop="project_id">
              <el-select class="custom-select" @change="onChange.changeProject" v-model="ruleForm.project_id" clearable
                placeholder="请选择">
                <el-option v-for="item in objectData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="vform-title">
            设备
          </td>
          <td colspan="5" style="text-align: left;">
            {{ ruleForm.equip_name }}--
            {{ props.equip.name }}
          </td>
        </tr>
        <tr>
          <td class="vform-title">
            运行区域
          </td>
          <td colspan="">
            <el-form-item prop="site_id">
              <el-select v-model="ruleForm.site_id" @change="onChange.onSite" clearable placeholder="请选择">
                <el-option v-for="item in siteData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td class="vform-title">
            运行日期
          </td>
          <td>
            <el-form-item prop="day_time">
              <el-date-picker v-model="ruleForm.day_time" style="width: 100%;" @change="onChange.dayTime" type="date"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td :rowspan="ruleForm.onoff_list.length ? ruleForm.onoff_list.length + 1 : 2">
            开关机记录
          </td>
          <td style="min-width: 180px;">
            开/停机时间
          </td>
          <td>
            运行人员
          </td>
          <td>

            <div class="fx">
              <div class="fx-1">
                开/停机原因
              </div>
              <el-tooltip class="box-item" effect="dark" :content="!ruleForm.day_time ? '请先选择运行日期' : '添加一条新的开关机记录'"
                placement="top">
                <!-- :disabled="(ruleForm.day_time?false:true)|| disabled" -->
                <el-button size="small" type="primary" @click="addOnOff(null, false)">
                  添加
                </el-button>
              </el-tooltip>
            </div>
          </td>
        </tr>
        <template v-if="ruleForm.onoff_list.length === 0">
          <tr>
            <td colspan="4" class="none">
              暂无开关机数据
            </td>
          </tr>
        </template>
        <template v-else>
          <tr v-for="(item, index) in ruleForm.onoff_list">
            <td>
              {{ item.type === 1 ? '开机' : '停机' }}
              <el-time-select v-model="item.time" style="width: 240px" @change="changeTime(index, $event)" start="00:00"
                step="00:01" end="23:59" placeholder="选择时间" format="HH:mm" value-format="HH:mm" />
            </td>
            <td>
              <el-select v-model="item.user_ids" @change="onChange.onItemUsers($event,index)" multiple placeholder="请选择值班人员"
                style="width: 100%">
                <el-option v-for="item in userDatas" v-show="item.type === 1" :key="item.id" :label="item.name"
                  :value="item.id" />
              </el-select>
            </td>
            <td>
              <div class="fx">
                <div class="fx-1">
                  <el-select v-model="item.reason_ids" @change="onChange.onItemReason($event,index)" multiple placeholder="请选择停机原因" style="width: 100%">
                    <el-option v-for="item in onoffDatas" v-show="item.type === 2" :key="item.id" :label="item.name"
                      :value="item.id" />
                  </el-select>
                </div>
                <el-tooltip class="box-item" effect="dark" content="删除该条开关机记录" placement="top">
                  <el-button style="margin-left: 10px;" size="small" @click="deleteItem(index)" type="danger">
                    删除
                  </el-button>
                </el-tooltip>
              </div>
            </td>
          </tr>
        </template>
        <tr>
          <td>
            运行情况
          </td>
          <td>
            <!-- {{ ruleForm.onoff > 0 ? '开机' : '停机' }} -->
            <el-switch v-model="ruleForm.onoff"
              :disabled="(ruleForm.onoff_list.length > 0 && ruleForm.onoff_list.length % 2 === 0) ? false : true"
              :active-value="1" :inactive-value="2" active-text="运行" inactive-text="停机" inline-prompt />
          </td>
          <td>
            运行时长
          </td>
          <td>
            {{ ruleForm.hour }}h
          </td>
        </tr>
        <tr>
          <td class="vform-title">
            运行人员
          </td>
          <td colspan="4">
            <el-form-item prop="user_ids">
              <el-select v-model="ruleForm.user_ids" @change="onChange.dayusers" multiple placeholder="请选择值班人员"
                style="width: 100%">
                <el-option v-for="item in userDatas" v-show="item.type === 1" :key="item.id" :label="item.name"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            富藻水处理水量<br>（流量计㎡）
          </td>
          <td>

            开机流量
          </td>
          <td>
            <el-input v-model="ruleForm.llj_1_start" @input="onChange.blurStart" type="number" autocomplete="off"
              :disabled="disabled">
              <template #append>m³</template>
            </el-input>
          </td>

          <td rowspan="2">
            <el-input v-model="ruleForm.shui_chuli"  type="number" autocomplete="off"
              :disabled="disabled">
              <template #append>m³</template>
            </el-input>
          </td>

        </tr>
        <tr>

          <td>
            关机流量
          </td>
          <td>
            <el-input v-model="ruleForm.llj_1_close" @input="onChange.blurClose" type="number" autocomplete="off" :disabled="disabled">
              <template #append>m³</template>
            </el-input>
          </td>

        </tr>
        <tr>
          <td rowspan="4">
            药剂消耗量<br>（kg）
          </td>
          <td rowspan="2">
            聚合氯化铝
          </td>
          <td>
            气浮
          </td>
          <td>
            <el-input v-model="ruleForm.yaoji_pac_qf" type="number" autocomplete="off" :disabled="disabled">
              <template #append>Kg</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            脱水
          </td>
          <td>
            <el-input v-model="ruleForm.yaoji_pac_ts" type="number" autocomplete="off" :disabled="disabled">
              <template #append>Kg</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td rowspan="2" class="td-rigth">
            聚合氯化铝
          </td>
          <td>
            气浮
          </td>
          <td>
            <el-input v-model="ruleForm.yaoji_pam_qf" type="number" autocomplete="off" :disabled="disabled">
              <template #append>Kg</template>
            </el-input>
          </td>

        </tr>
        <tr>
          <td>
            脱水
          </td>
          <td>
            <el-input v-model="ruleForm.yaoji_pam_ts" type="number" autocomplete="off" :disabled="disabled">
              <template #append>Kg</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td rowspan="5">
            能耗
          </td>
          <td rowspan="2">
            汽油
          </td>
          <td>
            领取
          </td>
          <td>
            <el-input v-model="ruleForm.nh_qy_lq" type="number" autocomplete="off" :disabled="disabled">
              <template #append>L</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            消耗
          </td>
          <td>
            <el-input v-model="ruleForm.nh_qy_xh" type="number" autocomplete="off" :disabled="disabled">
              <template #append>L</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            柴油
          </td>
          <td>
            领取
          </td>
          <td>
            <el-input v-model="ruleForm.nh_cy_lq" type="number" autocomplete="off" :disabled="disabled">
              <template #append>L</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            消耗
          </td>
          <td>
            <el-input v-model="ruleForm.nh_cy_xh" type="number" autocomplete="off" :disabled="disabled">
              <template #append>L</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            耗电
          </td>
          <td colspan="2">
            <el-input v-model="ruleForm.nh_hdl" type="number" autocomplete="off" :disabled="disabled">
              <template #append>Kw/h</template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            备注
          </td>
          <td colspan="3">
            <el-input v-model="ruleForm.content" autosize :disabled="disabled" type="textarea" autocomplete="off">
            </el-input>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <el-row>
              <el-col :span="8">
                <el-form-item label="填表人" prop="created_user_id">
                  <el-select v-model="ruleForm.created_user_id" @change="onChange.createUser" placeholder="请选择填报人"
                    style="width: 100%">
                    <el-option v-for="item in userDatas" v-show="item.type === 1" :key="item.id" :label="item.name"
                      :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding: 0 50px;">
                <el-form-item label="审核人" prop="check_xxy_id">
                  <el-select v-model="ruleForm.check_xxy_id" @change="onChange.checkXxy" placeholder="请选择信息员"
                    style="width: 100%">
                    <el-option v-for="item in userDatas" v-show="item.type === 2" :key="item.id" :label="item.name"
                      :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">

                <el-form-item label="监理" prop="check_jl_id">
                  <el-select v-model="ruleForm.check_jl_id" @change="onChange.checkjl" placeholder="请选择监理"
                    style="width: 100%">
                    <el-option v-for="item in userDatas" v-show="item.type === 3" :key="item.id" :label="item.name"
                      :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>




          </td>
        </tr>
      </table>

      <el-form-item style="padding-top: 20px;">
        <el-button type="primary" @click="submitForm(ruleFormRef)"   :loading="loadingSubmit">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, defineEmits, defineProps,watchEffect,watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

import { ElMessage,ElLoading } from 'element-plus'
import IMGA1 from "@/assets/images/A1.jpg";


import { equipRecordCarApi } from '@/utils/api/equip_record_car';
// 定义接收参数
const props = defineProps({
  id: Number,
  type: {
    type: String,
    default: 'create'
  },
  equip: {
    type: Object,
    default: () => {
      return {
        id: null,
        name: '',
        code: ''
      }
    }
  }
});
// watch(() => props.equip.id, (newValue, oldValue) => {
//   console.log('props.equip 变化了', newValue, oldValue) 
// }, { deep: true })
// const equip_id = ref(props.equip.id)

const disabled = ref(false)
if (props.type === 'info') {
  disabled.value = true
}
const projectList = localStorage.getItem('projectList')
const objectData = ref(projectList ? JSON.parse(projectList) : [])

const siteList = localStorage.getItem('siteList')
const siteData = ref(siteList ? JSON.parse(siteList) : [])

const userList = localStorage.getItem('userList')
const userDatas = ref(userList ? JSON.parse(userList) : [])

const reasonList = localStorage.getItem('reasonList')
const onoffDatas = ref(reasonList ? JSON.parse(reasonList) : [])

// 定义自定义事件
const emits = defineEmits(['close-dialog']);
// 使用 useRoute 获取参数
const loading = ref(false)


const lastInfo =  async (equip_id: string) => {
  // 这里是获取信息的接口
  loading.value = true
  const res = await equipRecordCarApi.lastinfo({ equip_id: equip_id })
  if(res.code === 200){
    const data = res.data
    resetForm(ruleFormRef.value)
    ruleForm.equip_id = data.equip_id || props.equip.id
    ruleForm.equip_name = data.equip_name || props.equip.name
    ruleForm.equip_code = data.equip_code || props.equip.code
    ruleForm.user_ids = data.user_ids
    ruleForm.llj_1_start = data.llj_1_close
    ruleForm.llj_1_close = data.llj_1_close
    ruleForm.site_id = data.site_id
    ruleForm.site_name = data.site_name
    ruleForm.project_id = data.project_id
    ruleForm.project_name = data.project_name
    ruleForm.onoff_list = reactive([])
    ruleForm.status = 0;
    ruleForm.created_user_id = data.created_user_id
    ruleForm.created_user_name = data.created_user_name
    ruleForm.check_xxy_id = data.check_xxy_id
    ruleForm.check_xxy_name = data.check_xxy_name
    ruleForm.check_jl_id = data.check_jl_id
    ruleForm.check_jl_name = data.check_jl_name
    if(data.onoff_list && data.onoff_list.length > 0){
      data.onoff_list.forEach((item: any) => {
        item.reason_ids = JSON.parse(item.reason_ids) || []
        item.reasons =JSON.parse(item.reasons) || []
        item.user_ids = JSON.parse(item.user_ids) || []
        item.users = JSON.parse(item.users) || []
      })
    }
    ruleForm.onoff_list = data.onoff_list
  }else{
    resetForm(ruleFormRef.value)
  }
  loading.value = false
 
}



const ruleFormRef = ref<FormInstance>()
interface onoffFormIO {
  id: Number | null
  type: Number | null
  site_id: Number | null
  site_name: string | null
  created_at: string | null
  updated_at: string | null
  record_id: Number | null
  record_day_id: Number | null
  time: string | null
  hour: Number | null
  reason_ids: Array<Number>
  reasons: Array<{
    id: Number | null
    name: string | null
  }>
  content: string | null
  user_id: Number | null
  user_name: string | null
  user_ids: Array<Number>
  users: Array<{
    id: Number | null
    name: string | null
  }>
}

interface IForm {
  id: Number | null
  equip_id: Number | null
  equip_name: string
  equip_code: string
  project_id: Number | null
  project_name: string
  site_id: Number | null
  site_name: string
  day_time: string

  onoff_list: Array<onoffFormIO>

  onoff: Number | null
  hour: Number
  user_ids: Array<Number>
  users: Array<{
    id: Number | null
    name: string
  }>
  shui_chuli: Number
  llj_1_start: Number
  llj_1_close: Number

  yaoji_pac: Number
  yaoji_pac_qf: Number
  yaoji_pac_ts: Number
  yaoji_pam: Number
  yaoji_pam_qf: Number
  yaoji_pam_ts: Number


  nh_qy_lq: Number
  nh_qy_xh: Number
  nh_cy_lq: Number
  nh_cy_xh: Number
  nh_hdl: Number

  content: string

  created_user_id: Number | null
  created_user_name: string
  check_xxy_id: Number | null
  check_xxy_name: string
  check_jl_id: Number | null
  check_jl_name: string

  check_status: Number | null

}

const ruleForm = reactive<IForm>({
  id: null,
  equip_id: props.equip.id,
  equip_name: props.equip.name,
  equip_code: props.equip.code,
  project_id: null,
  project_name: '',
  site_id: null,
  site_name: '',
  day_time: '',
  onoff_list: [],

  hour: 0,
  onoff: 0,
  user_ids: [],
  users: [],
  shui_chuli: 0,
  llj_1_close: 0,
  llj_1_start: 0,

  yaoji_pam: 0,
  yaoji_pam_qf: 0,
  yaoji_pam_ts: 0,

  yaoji_pac: 0,
  yaoji_pac_qf: 0,
  yaoji_pac_ts: 0,

  nh_qy_lq: 0,
  nh_qy_xh: 0,
  nh_cy_lq: 0,
  nh_cy_xh: 0,
  nh_hdl: 0,

  content: '',
  created_user_id: null,
  created_user_name: '',
  check_xxy_id: null,
  check_xxy_name: '',
  check_jl_id: null,
  check_jl_name: '',
  check_status: 1,
})

const rules = reactive<FormRules<typeof ruleForm>>({
  equip_id: [
    { required: true, message: '请选择项目', trigger: 'change' }
  ],
  equip_name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' }
  ],
  equip_code: [
    { required: true, message: '请输入项目编号', trigger: 'blur' }
  ],
  project_id: [
    { required: true, message: '请选择项目名称', trigger: 'change' }
  ],
  project_name: [
    { required: true, message: '请选择项目名称', trigger: 'blur' }
  ],
  site_id: [
    { required: true, message: '请选择运行区域', trigger: 'change' }
  ],
  site_name: [
    { required: true, message: '请输入运行区域', trigger: 'blur' }
  ],
  day_time: [
    { required: true, message: '请选择运行日期', trigger: 'change' }
  ],
  onoff: [
    { required: true, message: '请选择运行状态', trigger: 'change' }
  ],

  user_ids: [
    { required: true, message: '请输入运行人员', trigger: 'blur' }
  ],

  created_user_id: [
    { required: true, message: '请输入填表人', trigger: 'blur' }
  ],
  check_xxy_id: [
    { required: true, message: '请输入审核人', trigger: 'blur' }
  ],
  check_jl_id: [
    { required: true, message: '请输入审核人', trigger: 'blur' }
  ]
})


const changeTime = (index, val) => {
  onGetHour()
}

const onGetHour = () => {
  const list = ruleForm.onoff_list
  if (list.length > 0 && list.length % 2 === 0) {
    ruleForm.hour = calculateRunningHours(ruleForm.onoff_list)
    ruleForm.onoff = (ruleForm.hour > 0) ? 1 : 2
  } else {
    ruleForm.hour = 0
    ruleForm.onoff = 2
  }
}

const calculateRunningHours = (timeList) => {
  if (timeList.length % 2 === 0 && timeList.length > 0) {
    let totalHours = 0;
    for (let i = 0; i < timeList.length; i += 2) {
      // 检查是否存在对应的关机时间
      if (i + 1 < timeList.length) {
        const startTime = timeList[i].time;
        const endTime = timeList[i + 1].time;

        // 解析开机和关机时间为小时数
        const startHour = parseInt(startTime.split(':')[0]);
        const startMinute = parseInt(startTime.split(':')[1]);
        const endHour = parseInt(endTime.split(':')[0]);
        const endMinute = parseInt(endTime.split(':')[1]);

        let duration;
        // 判断开机时间和关机时间是否相等
        if (startHour === endHour && startMinute === endMinute) {
          duration = 24;
        } else if (endHour < startHour || (endHour === startHour && endMinute < startMinute)) {
          // 跨天计算，先算到当天 24:00 的时长，再加上第二天从 0:00 到关机时间的时长
          const durationToMidnight = (24 - startHour) - startMinute / 60;
          const durationFromMidnight = endHour + endMinute / 60;
          duration = durationToMidnight + durationFromMidnight;
        } else {
          // 正常计算时间段的小时数
          duration = (endHour - startHour) + (endMinute - startMinute) / 60;
        }
        totalHours += duration;
      }
    }
    // 保留两位小数并四舍五入
    return parseFloat(totalHours.toFixed(2));
  } else {
    return 0
  }

}

const addOnOff = (index, type) => {
  console.log(ruleForm.onoff_list.length, '=')
  ruleForm.onoff_list.push({
    id: null,
    type: (ruleForm.onoff_list.length % 2 === 0 ? 1 : 2),
    site_id: null,
    site_name: null,
    created_at: null,
    updated_at: null,
    record_id: null,
    record_day_id: null,
    time: null,
    reason_ids: [],
    reasons: [],
    content: '',
    user_id: null,
    user_name: '',
    user_ids: ruleForm.onoff_list.length > 0 ? ruleForm.onoff_list[ruleForm.onoff_list.length - 1].user_ids : [],
    users: ruleForm.onoff_list.length > 0 ? ruleForm.onoff_list[ruleForm.onoff_list.length - 1].users : []
  })
}

const deleteItem = (index: number) => {
  ruleForm.onoff_list.splice(index, 1)
  onGetHour()
}
const loadingModel = ref(null)
const loadingSubmit = ref(false)
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  if(ruleForm.llj_1_close < ruleForm.llj_1_start){
    ElMessage({
      type: 'error',
      message: '结束值不能小于开始值',
    }) 
    return
  }
  formEl.validate(async(valid) => {
    
    if (valid) {
      loadingSubmit.value = true
      loadingModel.value = ElLoading.service({
        lock: true,
        text: '正在提交',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      const res = await equipRecordCarApi.create(ruleForm)
      ElMessage({
          type: res.type,
          message: res.message,
      })
      if(res.code === 200){
        resetForm(ruleFormRef.value)
        lastInfo(props.equip.id)
      }
      loadingSubmit.value = false
      loading.value = false
      loadingModel.value.close()

    } else {
      loading.value = false
      loadingSubmit.value = false
      loadingModel.value.close()
      console.log('error submit!')
      
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  loadingSubmit.value = false

}

const onChange = {
  changeProject: (val) => {
    const info = objectData.value.find(item => item.id === val)
    ruleForm.project_name = info.name
  },
  onSite: (val) => {
    const info = siteData.value.find(item => item.id === val)
    ruleForm.site_name = info.name

  },
  dayTime: (val) => {
  },
  dayusers: (val) => {
    ruleForm.users = userDatas.value.filter(item => val.includes(item.id));
  },
  createUser: (val) => {
    ruleForm.created_user_name = userDatas.value.find(item => item.id === val).name
  },
  checkXxy: (val) => {
    ruleForm.check_xxy_name = userDatas.value.find(item => item.id === val).name
  },
  checkjl: (val) => {
    ruleForm.check_jl_name = userDatas.value.find(item => item.id === val).name
  },
  onItemUsers: (val, index) => {
    ruleForm.onoff_list[index].users = userDatas.value.filter(item => val.includes(item.id));
  },
  onItemReason: (val, index) => {
    ruleForm.onoff_list[index].reasons = onoffDatas.value.filter(item => val.includes(item.id));
  },
  blurStart: (val) => {
    console.log(val, '输入')
    ruleForm.shui_chuli = Number(ruleForm.llj_1_close) - Number(val)
  },
  blurClose: (val) => {
    console.log(val, '关闭')
    ruleForm.shui_chuli = Number(val) - Number(ruleForm.llj_1_start)
  }
}

onMounted(() => {
  
})
watchEffect(() => {
  if (props.equip.id) {
    console.log(11)
    lastInfo(props.equip.id)
    ruleForm.equip_id = props.equip.id
    ruleForm.equip_name =  props.equip.name
    ruleForm.equip_code = props.equip.code
  }
})
</script>

<style scoped lang="less">
.demo-ruleForm {
  // background: #fff;
  padding: 10px;
}

.table-form {
  padding: 0;
  border: 1px solid #9c9c9c;
  border-bottom: 0px;
  border-right: none;

  /* 合并单元格边框 */
  border-collapse: collapse;
  /* 移除表格的间距 */
  border-spacing: 0;
  /* 去除表格可能有的默认外边距 */
  margin: 0;
  /* 去除表格可能有的默认内边距 */
  padding: 0;
  /* 设置表格宽度为自动适应内容 */
  width: auto;
  /* 设置表格的字体大小为继承父元素的字体大小 */
  font-size: inherit;
  /* 设置表格的字体族为继承父元素的字体族 */
  font-family: inherit;
  width: 100%;
  font-size: 14px;

  td {
    border-bottom: 1px solid #9c9c9c;
    border-right: 1px solid #9c9c9c;
    padding: 5px;
    margin: 0;
    text-align: center;
    position: relative;
    color: #616161;
  }

  .icon {
    // text-align: right;
    // position: absolute;
    // right: 10px;
    cursor: pointer;
    font-size: 16px;
    width: 20px;
    height: 20px;
  }

  .input-item {
    color: #f00 !important;
  }

  .fx {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .fx-1 {
    flex: 1%;

  }

  .fx-1~.icon {
    padding: 0 10px;
  }

  .vform-title::after {
    content: "*";
    color: red;
    margin-left: 0px;
    // position: absolute;
    // left: 0;
    // top: 50%;
    // transform: translateY(-50%);
  }

  .none {
    color: #bfbfbf;
  }

  .el-form-item {
    margin-bottom: 0px;
  }
}
</style>

<style scoped>
.custom-select .el-input__inner {
  border: none !important;
}
</style>